<template>
  <div id="app">
    <div class="order-container">
      <div class="header">
        <h1>订单详细信息</h1>
      </div>

      <!-- 订单基本信息 -->
      <el-card class="order-card">
        <div slot="header" class="card-header">基本信息</div>
        <div class="card-body">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <div class="info-row">
                <div class="info-label">订单流水号：</div>
                <div class="info-value">{{ order.orderSn }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">会员名：</div>
                <div class="info-value">{{ order.memberName }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">订单状态：</div>
                <div class="info-value">
                  <el-select
                    v-model="order.orderState"
                    size="small"
                    style="width: 120px"
                    :disabled="true"
                  >
                    <el-option label="待付款" :value="1"></el-option>
                    <el-option label="待发货" :value="2"></el-option>
                    <el-option label="待收货" :value="3"></el-option>
                    <el-option label="待评价" :value="4"></el-option>
                    <el-option label="已完成" :value="4"></el-option>
                    <el-option label="已取消" :value="5"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="info-row">
                <div class="info-label">收货地址：</div>
                <div class="info-value">
                  {{ order.fullLocation }}{{ order.detail }}
                </div>
              </div>
              <div class="info-row">
                <div class="info-label">收货人：</div>
                <div class="info-value">{{ order.userName }}</div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="12">
              <div class="info-row">
                <div class="info-label">联系电话：</div>
                <div class="info-value">{{ order.telNumber }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">快递公司：</div>
                <div class="info-value">{{ order.expressCompany }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">快递单号：</div>
                <div class="info-value">{{ order.expressNumber }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">快递费用：</div>
                <div class="info-value">¥{{ order.expressCost }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">订单总价：</div>
                <div class="info-value">¥{{ order.orderPrice }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">实付金额：</div>
                <div class="info-value">¥{{ order.actualPrice }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">付款时间</div>
                <div class="info-value">{{ order.payTime }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 订单商品详情 -->
      <el-card class="order-card">
        <div slot="header" class="card-header">订单详情</div>
        <div class="card-body">
          <el-table :data="goods" style="width: 100%" border>
            <el-table-column
              prop="id"
              label="编号"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名称"
              min-width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="attrsText"
              label="商品属性"
              min-width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="goodsPrice"
              label="商品价格"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                ¥{{ scope.row.goodsPrice }}
              </template>
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column label="小计" width="120" align="center">
              <template slot-scope="scope">
                ¥{{ (scope.row.goodsPrice * scope.row.quantity).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>

          <div class="total-price">
            订单总金额：<span>¥{{ order.actualPrice }}</span>
          </div>
        </div>
      </el-card>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="closePage()">关闭</el-button>
        <el-button
          type="primary"
          v-if="order.orderState === 2"
          @click="handleSend"
          >发货</el-button
        >
      </div>

      <div class="footer">
        <p>© 2024 科泰购 - 专业的电商购物平台</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderInfo",
  data() {
    return {
      order: {},
      goods: [],
    };
  },
  created() {
    this.getOrderDetail(this.$route.query.id);
  },
  methods: {
    async getOrderDetail(id) {
      const res = await this.$axios(`/api/order/orderDetail?id=${id}`);
      if (res.data.code === 200) {
        this.order = res.data.data.orderVO;
        this.goods = res.data.data.goods;
      }
    },
    handleSend() {
      this.$confirm(`确定发货吗?`, "提示", {
        type: "info",
      })
        .then(async () => {
          this.order.orderState = 3; // 待收货
          const res = await this.$axios.post("/api/order/update", {
            orderState: this.order.orderState,
            id: this.order.id,
          });
          if (res.data.code === 200) {
            this.$message.success("发货成功");
          } else {
            this.$message.error("发货异常");
          }
        })
        .catch(() => {
          this.$message.info("已取消发货");
        });
    },
    closePage() {
      this.$router.back();
    },
  },
};
</script>
<style>
.order-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  overflow-y: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
}

.header h1 {
  color: #303133;
  font-size: 20px;
  font-weight: 500;
}

.order-card {
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  font-weight: 500;
  color: #303133;
}

.card-body {
  padding: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 18px;
}

.info-label {
  width: 120px;
  color: #909399;
  font-weight: 500;
}

.info-value {
  flex: 1;
  color: #606266;
}

.status-tag {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-waiting {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-shipped {
  background-color: #ecf5ff;
  color: #409eff;
}

.status-completed {
  background-color: #f0f9eb;
  color: #67c23a;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  gap: 10px;
}

.total-price {
  text-align: right;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 500;
}

.total-price span {
  color: #f56c6c;
  font-size: 18px;
}

.footer {
  margin-top: 30px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
    margin-bottom: 12px;
  }

  .info-label {
    width: 100%;
    margin-bottom: 5px;
  }

  .el-col {
    margin-bottom: 15px;
  }
}
</style>
